<template>
	<view>
		<view class="prefer-posi">
			<!-- hander工具栏 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()">
					<text>{{delicaTitle}}</text>
					<image mode="widthFix" style="vertical-align:middle;"></image>
				</view>
				<view class="delica-grow" @click="sales()">销量高</view>
				<view class="delica-grow" @click="spDed()">速度快</view>
				<view class="delica-grow" @click="unIon()">津贴联盟</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<image mode="widthFix" style="vertical-align:middle;"></image>
				</view>
			</view>
			<!-- 综合排序 -->
			<view class="sortList sortlitetle" v-if="drop">
				<block v-for="(item ,index) in sortList" :key="index">
					<text :class="{active:index==num}" @click="sortClick(item,index)">{{item.name}}
					</text>
				</block>
			</view>
			<!-- 筛选 -->
			<view class="sortList-view" v-if="sortmen">
				<!-- 多选区 商家特色-->
				<block v-for="(item ,index) in screenData" :key="index">
					<view>
						<view class="sortList-title">
							{{item.title}}
						</view>
						<view class="sortList-flex">
							<block v-for="(node ,i ) in item.datas" :key="i">
								<text class="Choice">{{node.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!--单选区 人均价格-->
				<block v-for="(item ,index) in person" :key="index">
					<view>
						<view class="sortList-title">
							{{item.title}}
						</view>
						<view class="sortList-flex">
							<block v-for="(node,i ) in item.datas" :key="i">
								<text class="Choice">{{node.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<view class="sortList-bottom">
					<text @click="onClear()">
						清空
					</text>
					<text @click="comfire()">
						确定
					</text>
				</view>
			</view>
		</view>
		<!--阴影 -->
		<view class="yin" v-if="yin" @click="goback()">
		</view>
	</view>
</template>

<script>
	export default {
		// 数据状态
		data() {
			return {
				num: 0,
				drop: false,
				sortmen: false,
				yin:false,
				delicaTitle: "综合排序",
				sortList: [{
						name: "综合排序",
						screen: "_id",
						nums: 1
					},
					{
						name: "起送最低",
						screen: "delivering",
						nums: 1
					},
					{
						name: "配送最低",
						screen: "physical",
						nums: 1
					},
					{
						name: "人均高到低",
						screen: "capita",
						nums: -1
					},
					{
						name: "人均低到高",
						screen: "capita",
						nums: 1
					},

				],

				screenData: [{
						title: "商家特色(可多选)",
						datas: [{
								id: "1",
								"sign": "duration",
								"name": "配送最快"
							},
							{
								id: "1",
								"sign": "deliver",
								"name": "0元起送"
							},
							{
								id: "1",
								"sign": "physi",
								"name": "配送最快"
							}
						]
					},
					{
						title: "商家特色(可多选)",
						datas: [{
								id: "1",
								"sign": "duration",
								"name": "配送最快"
							},
							{
								id: "1",
								"sign": "deliver",
								"name": "0元起送"
							},
							{
								id: "1",
								"sign": "physi",
								"name": "配送最快"
							}
						]
					},
				],
				person: [{
					title: "人均价",
					datas: [{
							"per": {
								"$lt": 20
							},
							"name": "20元以下"
						},
						{

							"per": {
								"$lte": 40,
								"$gte": 20
							},
							"name": "20-40元"
						},
						{
							"per": {
								"$gt": 40
							},
							"name": "40元以上"
						}
					]
				} ]
			}
		},
		// 方法容器
		methods: {
			//综合排序
			multiple() {
				this.drop = true
				this.yin=true
				this.sortmen = false
			},
			sortClick(data, index) {
				this.delicaTitle = data.name;
				this.num = index
				this.yin =false;
				this.drop=false;
			},
			sales() {
				this.goback()
			},
			spDed() {
				this.goback()
			},
			unIon() {
				this.goback()
			},
			//筛选
			scReen() {
				this.sortmen = true
				this.drop = false
			    this.yin =true;
			},
			//确定
			comfire(){
				this.sortmen=false;
				this.goback()
			},
			//清空
			onClear(){
				
			},
			//阴影
			goback(){
				this.yin = false;
				this.drop=false;
				this.sortmen=false;
				
			}

		}
	}
</script>

<style scoped>
		
	.yin{
		background:rgba(0,0,0,0.5);
		position:fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.delica-view {
		font-size: 30upx;
		display: flex;
		align-items: center;
		color: #666666;
		height: 70upx;
		padding: 0 15upx;
		background-color: #FFFFFF;

	}

	.delica-view image {
		width: 30upx;
		height: 30upx;
		display: block;
		background-color: #4CD964;
		vertical-align: middle;
	}

	.delica-list {
		display: flex;
		align-items: center;
	}

	.delica-right {
		justify-content: flex-end;
		flex-grow: 1;

	}

	.delica-grow {
		flex-grow: 1;
	}

	.prefer-posi {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}

	.sortlitetle text {
		height: 70upx;
		font-size: 30upx;
		line-height: 70upx;
		border-top: 1rpx solid #ededed;
		color: #666666;
		padding: 0 15upx;
	}

	.sortlitetle {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.active {
		color: #4CD964 !important;
	}
		
	.sortList-view{
		height: 700upx;
		overflow: hidden;
		overflow-y: scroll;
		background-color: #FFFFFF;
	}
		
	.sortList-title{
		padding: 0 15upx;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
	}
	
		
	.Choice{
		font-size: 28upx;
		background-color: #f8f8f8;
		height: 55upx;
		line-height: 55upx;
		color: #666666;
		width: calc((100%/3)-15px) !important;
		margin: 7.5px;
		text-align: cneter;
		display: block;
		border-radius: 5upx;
		padding: 0 15upx;
	}
	.sortList-flex{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30upx;
	}
		
	.sortList-bottom{
		background-color: #FFFFFF;
		height: 80upx;
		border-top:1px solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
		
	.sortList-bottom text{
		flex-grow: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
	.sortList-bottom text:nth-child(1){
		border-right: 1px solid #F0AD4E;
	}
		
	.sortList-bottom text:nth-child(2){
		background-color: #ffd348;
	}
		
	.scractive{
		background-color: #fef6df !important;
		color: #f29909 !important;
	}

</style>
